<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* Echarts (https://github.com/apache/echarts)
*********************************************************************-->
<html>
  <head>
    <meta charset="utf-8" />
    <title data-i18n="resources.title_GraphPie"></title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      #map .mapboxgl-popup-content {
        padding: 10px 16px 15px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
    <script type="text/javascript" include="echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <script type="text/javascript">
      var data;
      var attribution =
        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        " Image <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span>" +
        " <a href='https://echarts.baidu.com' target='_blank'>© 2018 " +
        resources.title_3baidu +
        ' ECharts</a>';
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var tileURL =
        host +
        '/iserver/services/map-world/rest/maps/世界地图_Gray/zxyTileImage.png?prjCoordSys=' +
        encodeURIComponent('{"epsgCode":3857}') +
        '&z={z}&x={x}&y={y}';
      var url = host + '/iserver/services/map-china/rest/maps/China_4326';
      var chart,
        div,
        popup = '';
      var map = new mapboxgl.Map({
        container: 'map',
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              attribution: attribution,
              type: 'raster',
              tiles: [tileURL],
              tileSize: 256
            }
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              minzoom: 0,
              maxzoom: 18
            }
          ]
        },
        center: [116.402, 39.905],
        zoom: 3.5
      });
      map.addControl(new mapboxgl.NavigationControl(), 'top-left');
      map.loadImage('../img/marker-icon.png', function (error, image) {
        if (error) throw error;
        map.addImage('positionPoint', image);
      });

      var categoryDataMap = {
        北京市: [
          { value: 335, name: resources.text_class + 'A' },
          { value: 679, name: resources.text_class + 'B' },
          { value: 1299, name: resources.text_class + 'C' }
        ],
        广州市: [
          { value: 117, name: resources.text_class + 'A' },
          { value: 1267, name: resources.text_class + 'B' },
          { value: 1048, name: resources.text_class + 'C' }
        ],
        上海市: [
          { value: 475, name: resources.text_class + 'A' },
          { value: 1450, name: resources.text_class + 'B' },
          { value: 875, name: resources.text_class + 'C' }
        ]
      };
      var dataMap = {
        北京市: [
          { value: 335, name: resources.text_commodity + 'A' },
          { value: 310, name: resources.text_commodity + 'B' },
          { value: 234, name: resources.text_commodity + 'C' },
          { value: 135, name: resources.text_commodity + 'D' },
          { value: 1048, name: resources.text_commodity + 'E' },
          { value: 251, name: resources.text_commodity + 'F' }
        ],
        广州市: [
          { value: 117, name: resources.text_commodity + 'A' },
          { value: 284, name: resources.text_commodity + 'B' },
          { value: 768, name: resources.text_commodity + 'C' },
          { value: 215, name: resources.text_commodity + 'D' },
          { value: 901, name: resources.text_commodity + 'E' },
          { value: 148, name: resources.text_commodity + 'F' }
        ],
        上海市: [
          { value: 475, name: resources.text_commodity + 'A' },
          { value: 29, name: resources.text_commodity + 'B' },
          { value: 430, name: resources.text_commodity + 'C' },
          { value: 981, name: resources.text_commodity + 'D' },
          { value: 732, name: resources.text_commodity + 'E' },
          { value: 143, name: resources.text_commodity + 'F' }
        ]
      };

      var option = {
        title: {
          text: resources.text_beijingCommoditySales,
          subtext: resources.text_fictitiouData,
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        backgroundColor: '#404a59',
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'bottom',
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          data: [
            resources.text_commodity + 'A',
            resources.text_commodity + 'B',
            resources.text_commodity + 'C',
            resources.text_commodity + 'D',
            resources.text_commodity + 'E',
            resources.text_commodity + 'F'
          ]
        },
        series: [
          {
            name: resources.text_commodityClass,
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: categoryDataMap['北京市']
          },
          {
            name: resources.text_commodity,
            type: 'pie',
            radius: ['40%', '55%'],
            data: dataMap['北京市']
          }
        ]
      };

      div = document.createElement('div');

      chart = echarts.init(div, '', {
        width: 650,
        height: 400
      });
      chart.setOption(option);
      query();

      function query() {
        var sqlParam = new mapboxgl.supermap.QueryBySQLParameters({
          queryParams: [
            {
              name: 'ProvinceCapital_P@China',
              attributeFilter: "NAME = '广州市' or NAME = '上海市'"
            },
            {
              name: 'Capital_P@China',
              attributeFilter: "Name = '北京市'"
            }
          ]
        });

        queryService = new mapboxgl.supermap.QueryService(url).queryBySQL(sqlParam).then(function (serviceResult) {
          var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
          features = recordsets && recordsets[0] && recordsets[0].features;
          var featureCollection = features.features;
          var feature = recordsets[1].features.features;
          featureCollection.push(feature[0]);

          var fs = {
            features: featureCollection,
            type: 'FeatureCollection'
          };
          map.addLayer({
            id: 'points',
            type: 'symbol',
            layout: {
              'icon-image': 'positionPoint',
              'icon-size': 0.8,
              'icon-offset': [0, -15] //设置偏移量
            },
            source: {
              type: 'geojson',
              data: fs
            }
          });

          map.on('click', 'points', function (e) {
            popup = new mapboxgl.Popup({ maxWidth: 'none' });
            popup
              .setLngLat(e.lngLat.toArray())
              .setDOMContent(div) // sets a popup on this marker
              .addTo(map);

            var city = e.features[0].properties.NAME || e.features[0].properties.Name;
            chart.setOption({
              title: {
                text: city + resources.text_commoditySales
              },
              series: [
                {
                  name: resources.text_commodityClass,
                  data: categoryDataMap[city]
                },
                {
                  name: resources.text_commodity,
                  data: dataMap[city]
                }
              ]
            });
          });
        });
      }
    </script>
  </body>
</html>
